<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/index/zTreeStyle.min.css" />
<style type="text/css">
.Hui-iconfont{
	text-decoration: underline;
}

/*按钮*/
    .icon_div {
        display: inline-block;
        height: 25px;
        width: 35px;
    }

    .icon_div a {
        display: inline-block;
        width: 27px;
        height: 20px;
        cursor: pointer;
    }

    /*end--按钮*/

    /*ztree表格*/
    .ztree {
        padding: 0;
        border: 2px solid #CDD6D5;
    }

    .ztree li a {
        vertical-align: middle;
        height: 30px;
    }

    .ztree li > a {
        width: 100%;
    }

    .ztree li > a,
    .ztree li a.curSelectedNode {
        padding-top: 0px;
        background: none;
        height: auto;
        border: none;
        cursor: default;
        opacity: 1;
    }

    .ztree li ul {
        padding-left: 0px
    }

    .ztree div.diy span {
        line-height: 30px;
        vertical-align: middle;
    }

    .ztree div.diy {
        height: 30px;
        width: 25%;
        line-height: 30px;
        border-top: 1px dotted #ccc;
        border-left: 1px solid #eeeeee;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
        color: #6c6c6c;
        font-family: "SimSun";
        font-size: 12px;
        overflow: hidden;
    }

    .ztree div.diy:first-child {
        text-align: left;
        text-indent: 10px;
        border-left: none;
    }

    .ztree .head {
        background: #f5fafe;
    }

    .ztree .head div.diy {
        border-top: none;
        border-right: 1px solid #CDD2D4;
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-weight:700;
        text-align: center;
        color:#333;
    }
    #dataTree{
    	width: 90%;
    	margin: 40px auto;
    }
    .inputUpdate{
    	width: 100px;
    	height: 30px;
    	margin: 20px;
    }
   

</style>
<title>菜单配置</title>
</head>
<body>
	
	<div class="layer">
    	<div id="tableMain">
	        <ul id="dataTree" class="ztree">

	        </ul>
    	</div>
	</div>
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="${ctx}/static/plug/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/static/plug/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/plug/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="${ctx}/static/js/jquery//jquery.ztree.all.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$.post("${ctx}/role/resourceList", null , function(data) {
				console.log(data.resourceRespVoList)
				query(data.resourceRespVoList)
			});
			
			
		});
		
		 var zTreeNodes;
		    var setting = {
		        view: {
		            showLine: false,
		            showIcon: false,
		            addDiyDom: addDiyDom
		        },
		        data: {
		            simpleData: {
		                enable: true
		            }
		        }
		    };
		    /**
		     * 自定义DOM节点
		     */
		    function addDiyDom(treeId, treeNode) {
		        var spaceWidth = 15;
		        var liObj = $("#" + treeNode.tId);
		        var aObj = $("#" + treeNode.tId + "_a");
		        var switchObj = $("#" + treeNode.tId + "_switch");
		        var icoObj = $("#" + treeNode.tId + "_ico");
		        var spanObj = $("#" + treeNode.tId + "_span");
		        aObj.attr('title', '');
		        aObj.append('<div class="diy swich"></div>');
		        var div = $(liObj).find('div').eq(0);
		        switchObj.remove();
		        spanObj.remove();
		        icoObj.remove();
		        div.append(switchObj);
		        div.append(spanObj);
		        var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
		        switchObj.before(spaceStr);
		        var editStr = '';
		        editStr += '<div class="diy">' + (treeNode.levelName) + '</div>';
		        editStr += '<div class="diy">' + (treeNode.urlStr == null ? '（空）' :  treeNode.urlStr) + '</div>';
		        editStr += '<div class="diy">' + formatHandle(treeNode) + '</div>';
		        aObj.append(editStr);
		    }
		    /**
		     * 查询数据
		     */
		    function query(data) {
		    	console.log(data);
		        zTreeNodes = data;
		        //初始化树
		        $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
		        //添加表头
		        var li_head = ' <li class="head"><a><div class="diy">名称</div><div class="diy">菜单等级</div>' +
		            '<div class="diy">接口信息（url）</div><div class="diy">操作</div></a></li>';
		        var rows = $("#dataTree").find('li');
		        if (rows.length > 0) {
		            rows.eq(0).before(li_head)
		        } else {
		            $("#dataTree").append(li_head);
		            $("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >无符合条件数据</div></li>')
		        }
		    }
		    /**
		     * 根据权限展示功能按钮
		     * @param treeNode
		     * @returns {string}
		     */
		    function formatHandle(treeNode) {
		        var htmlStr = '';
		        htmlStr += '<div class="icon_div"><a class="icon_edit" title="修改" href="javascript:edit(\'' + treeNode.id + '\',\'' + treeNode.name + '\',\'' + treeNode.urlStr + '\')">修改</a></div>';
		        htmlStr += '<div class="icon_div"><a class="icon_add" title="添加子部门" href="javascript:addSector(\'' + treeNode.id + '\',\'' + treeNode.name + '\',\'' + treeNode.levelStr + '\')">添加</a></div>';
		        htmlStr += '<div class="icon_div"><a class="icon_del" title="删除" href="javascript:del(\'' + treeNode.id + '\',\'' + treeNode.name + '\',\'' + treeNode.levelStr + '\')">删除</a></div>';
		        return htmlStr;
		    }

		    function edit(id, name, urlStr){
		    	layer.prompt({
		    		formType: 0,
		    		value: name,
		    		title: '修改'+ name +'信息',
		    		label:['名称']
		    		}, function(value, index, elem){
		    			var urls;
		    			if($(".layui-layer-input").eq(1)){
		    				urls = $(".layui-layer-input").eq(1).val();
		    			}
		    			var data = {
		    				"id" : id,	
		    				"name" : value,
		    				"url" : urls,
		    			};
		    			addOrUpdate(data);
		    			layer.close(index);
		    		});
		    	if(urlStr != 'null'){
		    		$(".layui-layer-content").append('<input type="text" class="layui-layer-input" value="'+ urlStr +'"  style="margin-top: 20px">');
		    	}
		    }
		    function addSector(id, name, level){
		    	if(level == 4 || level == 0){
		    		layer.msg("该菜单是最顶层菜单无法增加子菜单");
		    		return;
		    	}
		    	layer.prompt({
		    		formType: 0,
		    		value: '',
		    		title: '给'+ name +'菜单增加子菜单',
		    		label:['名称']
		    		}, function(value, index, elem){
		    			var urls;
		    			if($(".layui-layer-input").eq(1)){
		    				urls = $(".layui-layer-input").eq(1).val();
		    			}
		    			var data = {
		    				"id" : null,	
		    				"name" : value,
		    				"url" : urls,
		    				"parentId": id,
		    				"level":level+1
		    			};
		    			addOrUpdate(data);
		    			layer.close(index);
		    		});
		    	if(level != 1 || id == 999999){
		    		$(".layui-layer-content").append('<input type="text" class="layui-layer-input" placeholder="路径（url）" style="margin-top: 20px">');
		    	}
		    	$(".layui-layer-input").eq(0).attr("placeholder" , "名称");
		    }
		    function del(id, name, level){
		    	if(level == 1){
		    		layer.msg("对不起顶级菜单不能删除！");	
		    		return;
		    	}
		    	layer.open({
		    		  type: 1,
		    		  title: '删除',
		    		  btn: ['确定', '取消'],
		    		  content: '确定删除'+ name + "菜单？<br>将会删掉当前菜单下所有子菜单！",
		    		  yes: function(index, layero){
		    			  $.post("${ctx}/role/delResourcet", data , function(data) {
		  					if(data.result){
		  		    			layer.msg("删除成功！");	
		  		    			reloadData(false);
		  		    		}
		  		    	});
					  },btn2: function(index, layero){
						  
					  },cancel: function(){
						  
					  } 
		    		});  
		    	var data = {
		    		"id":id	
		    	}
		    }
		    
		    function addOrUpdate(data){
		    	console.log(data);
		    	$.post("${ctx}/role/addOrUpdateResourcet", data , function(data) {
		    		if(data.result){
		    			layer.msg("修改或新增成功！");
		    			reloadData(false);
		    		}
		    	});
		    }
		    
		    

			function reloadData(resetPage) {
				window.location.reload();
			}

			
	</script>
</body>
</html>
